<div class="wrapper"
    style="position: absolute;width: 100%;height: 100%;display: flex;flex-flow: column nowrap;justify-content: center;background-color: #141313a8;z-index: 999999 !important;">
    <div class="header">用户登陆 </div>
    <div class="scope">
        <ul>
            <li>
                <div class="text">
                    <span class="yonghu"></span><input type="text" id="username" placeholder="请输入用户名">
                </div>
            </li>
            <li>
                <div class="password">
                    <span class="mima"></span><input type="password" id="password" placeholder="请输入密码">
                </div>
            </li>
            <li>
                <input type="button" id="Login" @onclick="_this.Login(this)" value="登陆">
            </li>
        </ul>
    </div>
</div>
$js-Login{{
    // * 得到节点
    let username = Value[0].$.GetID("username");
    let password = Value[0].$.GetID("password");
    // * 处理值
    if (username.value != "" && password.value != ""){
        // 登陆
        window.UserInfo.Login(username.value,password.value, function (error, data) {
            if (error != null) {
                PetUI.Prompt(error);
            } else {
                // 隐藏登陆界面
                Value[0].$.iframe.Display(false); // 隐藏模板
                Value[0].$.CallBack();
                // 初始化
                username.value = "";
                password.value = "";
                // 重读列表数据
                window.UpdateCount();
            }
        })
    }else{
        PetUI.Prompt("用户名/密码不可为空");
    }
}}
$css{{
    @font-face {
        font-family: 'iconfont';
        src: url('/lib/Font/font_1463147324_946932.eot');
        /* IE9*/
        src: url('/lib/Font/font_1463147324_946932.eot') format('embedded-opentype'),
            /* IE6-IE8 */
            url('/lib/Font/font_1463147324_946932.woff') format('woff'),
            /* chrome、firefox */
            url('/lib/Font/font_1463147324_946932.ttf') format('truetype'),
            /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('/lib/Font/font_1463147324_946932.svg') format('svg');
        /* iOS 4.1- */
    }
    * {
        margin: 0;
        padding: 0
    }
    li {
        list-style: none;
    }
    
    .scope a {
        text-decoration: none;
    }
    
    
    .wrapper {
        text-align: center;
    }
    
    .header {
        font-size: 50px;
        font-family: 微软雅黑;
        color: rgba(98, 156, 254, 0.81);
    }
    
    .header span {
        font-size: 30px;
        font-family: "Brush Script Std";
    }
    
    .scope {
        width: 260px;
        height: 200px;
        margin: 20px auto;
        padding: 30px;
        box-shadow: 0px 1px 2px 1px #b1d7ef, inset 0px 1px 1px rgb(137, 194, 234);
        border-radius: 3px;
        background-color: #A1DEF340;
    }
    
    .scope ul {
        width: 100%;
        height: 100%;
        text-align: left;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
    }
    
    ul li div {
        width: 260px;
        height: 40px;
        background: #fffffd8a;
        color: rgb(98, 156, 254);
        box-shadow: inset 0px 2px 5px #aaa0;
        border-radius: 5px;
        position: relative;
    }
    
    ul li .yonghu {
        font-family: iconfont;
        position: absolute;
        top: 12px;
        left: 10px;
    }
    
    ul li .mima {
        font-family: iconfont;
        position: absolute;
        top: 12px;
        left: 10px;
    }
    
    ul li div input {
        height: 40px;
        width: 100%;
        padding: 0 35px;
        border: none;
        background: #34393b00;
        color: rgb(55, 59, 60);
        box-shadow:
            0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #3247575e;
        border-radius: 5px;
    }
    
    ul li input:focus {
        outline: none;
        background: #f5f2efa1;
    }
    
    ul .remember {
        font-size: 14px;
        font-family: 微软雅黑;
        font-weight: bold;
        color: rgb(98, 94, 91);
        position: relative;
        display: flex;
        justify-content: center;
    }
    
    ul li a {
        font-size: 14px;
        font-family: 黑体;
        color: rgb(152, 142, 135);
        display: flex;
        justify-content: center;
    }
    
    ul li input[type*="button"] {
        width: 100%;
        height: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #629cfe;
        background: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #81bbe6d6;
    }
    
    ul li input[type*="button"]:hover {
        background: #cbeef6;
    }
    
    ul li input[type*="button"]:active {
        width: 100%;
        height: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #629cfe;
        background: #fb892f;
        background: #9de1f9;
    }
    
    .footer {
        font-size: 12px;
        font-family: 黑体;
        color: rgb(98, 94, 91);
    }
    
    .footer a {
        color: rgb(152, 142, 135);
    }
    
    /*将按钮放到一行*/
    .Parallel {
        text-align: center;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0px;
    }
    
    .Parallel input[type*="button"] {
        width: 45%;
    }
}}